import './styled.less'; // 引入外部样式
import { defineComponent } from 'vue';
// import { Modal, Button, Input } from 'ant-design-vue';

export default defineComponent({
  props: {
    visible: Boolean,
    showIcon: Boolean,
    modalStyle: {
      type: String,
      validator: value => {
        return ['iconStyle', 'normalIconStyle'].includes(value);
      },
      required: true
    },
    options: {
      type: Object,
      required: true
    }
  },
  computed: {
    type() {
      return this.options.type;
    },
    modalStyleObj() {
      const iconStyle = {
        width: '365px'
      };
      const normalIconStyle = {
        width: '340px'
      };
      if (this.modalStyle === 'iconStyle') {
        return iconStyle;
      } else if (this.modalStyle === 'normalIconStyle') {
        return normalIconStyle;
      } else {
        return {};
      }
    }
  },
  render() {
    return (
      <a-modal
        class={'modelstyle'}
        style={this.modalStyleObj}
        title={
          <span>
            {this.showIcon ? (
              <Icon type="info-circle" class="icon">
                <span class="icon">
                  <i class="fa fa-info"></i>
                </span>
                <span class="text">!</span>
              </Icon>
            ) : null}
            {this.options.title}
          </span>
        }
        visible={this.visible}
        onCancel={this.options.onCancel}
        footer={
          <div>
            <a-button onClick={this.options.onCancel}>取消</a-button>
            <a-button type="primary" onClick={this.options.onOk}>
              确定
            </a-button>
          </div>
        }
      >
        {this.type === 1 && (
          <div>
            <p class="content">{this.options.content}</p>
          </div>
        )}
        {this.type === 2 && (
          <div>
            <label>处理意见</label>
            <a-input.TextArea rows={4} />
          </div>
        )}
      </a-modal>
    );
  }
});
